<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
</head>

<body>
  <ng-map zoom="6" center="20.291, 153.027" map-type-id="TERRAIN">
    <shape name="polyline" id="foo"
      path="[[22.291, 153.027], [18.291, 153.027]]"
      icons="[
        {
          icon: {
            path: 'M -2,0 0,-2 2,0 0,2 z',
            strokeColor: '#F00',
            fillColor: '#F00',
            fillOpacity: 1
          },
          offset: '0%'
        },
        {
          icon: {
            path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
            strokeColor: '#00F',
            rotation: 45
          },
          offset: '50%'
        },
        {
          icon: {
            path: 'M -2,-2 2,2 M 2,-2 -2,2',
            strokeColor: '#292',
            strokeWeight: 4
          },
          offset: '100%'
        }
      ]">
    </shape>
 </ng-map>
</body>
</html>
